<template>
<div class="page" id='shopping-cart'>
<section class="main-container col1-layout">
  <div class="main container">
    <div class="col-main">


      <div class="cart">
        <!--page cart -->
        <div class="page-title">
          <h2>我的购物车</h2>
        </div>
        <div class="table-responsive">
          <form method="post" action="#updatePost/">
            <input type="hidden" value="Vwww7itR3zQFe86m" name="form_key">
            <fieldset>
              <table class="data-table cart-table" id="shopping-cart-table">
                
                <thead>
                  <tr class="first last">
                    <th rowspan="1">&nbsp;</th>
                    <th rowspan="1">图片</th>
                    <th rowspan="1"><span class="nobr">商品名称</span></th>
                    <th rowspan="1"></th>
                    <th colspan="1" class="a-center"><span class="nobr">价格</span></th>
                    <th class="a-center" rowspan="1">数量</th>
                    <th colspan="1" class="a-center">总价</th>
                    <th class="a-center" rowspan="1">&nbsp;</th>
                  </tr>
                </thead>

                <tbody>

                  <tr v-for="item in items" class="first odd">
                    <td><input type="checkbox" :id="item.id" v-on:click='pitchOn(item.id, item.user_name)'></td>
                    <td class="image"><a class="product-image" title="Sample Product" href="product_detail.html"><img width="75" alt="Sample Product" src="../assets//product1.jpg"></a></td>
                    <td><h2 class="product-name"> <a href="product_detail.html">{{ item.goods_name }}</a> </h2></td>
                    <td class="a-center"><a title="Edit item parameters" class="edit-bnt" href="#configure/id/15945/"></a></td>
                    <td class="a-right"><span class="cart-price"> <span class="price">${{ item.goods_price }}</span> </span></td>
                    <td class="a-center movewishlist"><input maxlength="12" class="input-text qty" title="Qty" size="4" :value="item.goods_num" name="cart[15945][qty]"></td>
                    <td class="a-right movewishlist"><span class="cart-price"> <span class="price">${{ item.total }}</span> </span></td>
                    <td class="a-center last"><a class="button remove-item" title="Remove item" v-on:click='rmShoppingCart($index, item.id, item.user_name)'><span><span>Remove item</span></span></a></td>
                  </tr>

                  <tr class="first odd">
                    <td><input type="checkbox" id="jack" value="Jack" v-on:click='pitchOn(11,"jack" ,11)'></td>
                    <td class="image"><a class="product-image" title="Sample Product" href="product_detail.html"><img width="75" alt="Sample Product" src="../assets//product1.jpg"></a></td>
                    <td><h2 class="product-name"> <a href="product_detail.html">111</a> </h2></td>
                    <td class="a-center"><a title="Edit item parameters" class="edit-bnt" href="#configure/id/15945/"></a></td>
                    <td class="a-right"><span class="cart-price"> <span class="price">$111</span> </span></td>
                    <td class="a-center movewishlist"><input maxlength="12" class="input-text qty" title="Qty" size="4" value="111" name="cart[15945][qty]"></td>
                    <td class="a-right movewishlist"><span class="cart-price"> <span class="price">$111</span> </span></td>
                    <td class="a-center last"><a class="button remove-item" title="Remove item" v-on:click="rmShoppingCart($index, item.id, item.user_name)"><span><span>Remove item</span></span></a></td>
                  </tr>

                </tbody>

                <tfoot>
                  <tr class="first last">
                    <td class="a-right last" colspan="50"><button onClick="setLocation('#')" class="button btn-continue" title="Continue Shopping" type="button"><span><span>继续购物</span></span></button>
                      <input type="button" id="empty_cart_button" class="button btn-empty" title="Clear Cart" value="清理购物车" name="update_cart_action" v-on:click="clearShoppingCart(user_name)"><span><span></span></span></input>
                    </td>
                  </tr>
                </tfoot>

              </table>
            </fieldset>
          </form>
        </div>
        <!-- end page cart -->

        <!--cart COLLATERALS-->
        <div class="cart-collaterals row">
          <div class="col-sm-4">
            <div class="shipping">
              <h3>收货方式与地址</h3>
              <div class="shipping-form">
                <form id="shipping-zip-form" method="post" action="#estimatePost/">
                  <p>请输入你的收货方式或维修地址</p>
                  <ul class="form-list">
                    <li>
                      <label class="required" for="country"><em>*</em>地区</label>
                      <div class="input-box">
                        <select title="Country" class="validate-select" id="country" name="country_id">
                          <option value="Select">Select</option>
                          <option value="AF">Afghanistan</option>
                        </select>
                      </div>
                    </li>
                    <li>
                      <label for="region_id">街道</label>
                      <div class="input-box">
                        <select style="" title="State/Province" name="region_id" id="region_id"  class="required-entry validate-select">
                          <option value="">Please select region, state or province</option>
                          <option value="1" title="Alabama">Alabama</option>
                        </select>
                        <input type="text" style="display:none;" class="input-text required-entry" title="State/Province" value="" name="region" id="region">
                      </div>
                    </li>
                    <li>
                      <label for="postcode">详细收货地址</label>
                      <div class="input-box">
                        <input type="text" value="" name="estimate_postcode" id="postcode" class="input-text validate-postcode">
                      </div>
                    </li>
                  </ul>
                  <div class="buttons-set11">
                    <button class="button get-quote" onClick="coShippingMethodForm.submit()" title="Get a Quote" type="button"><span>确认</span></button>
                  </div>
                  <!--buttons-set11-->
                </form>
              </div>
            </div>
          </div>
          <div class="col-sm-4">
            
            <div class="discount">
            <h3>优惠码</h3>
            <form method="post" action="#couponPost/"  >
              <label for="coupon_code">请输入您的优惠码</label>
              <input type="hidden" value="0" id="remove-coupone" name="remove">
              <input type="text" value="" name="coupon_code" id="coupon_code" class="input-text fullwidth">
              <button value="Apply Coupon" onClick="discountForm.submit(false)" class="button coupon " title="Apply Coupon" type="button"><span>提交</span></button>
          </form>
          </div>
         
          </div>
          <div class="totals col-sm-4">
            <h3>购物车总价</h3>
            <div class="inner">
              <table class="table shopping-cart-table-total" id="shopping-cart-totals-table">
               
                <tfoot>
                  <tr>
                    <td colspan="1" class="a-left" style=""><strong>需付款</strong></td>
                    <td class="a-right" style=""><strong><span class="price">$77.38</span></strong></td>
                  </tr>
                </tfoot>
                <tbody>
                  <tr>
                    <td colspan="1" class="a-left" style=""> 总价 </td>
                    <td class="a-right" style=""><span class="price">$77.38</span></td>
                  </tr>
                </tbody>
              </table>
              <ul class="checkout">
                <li>
                  <button onClick="" class="button btn-proceed-checkout" title="Proceed to Checkout" type="button"><span>提交订单</span></button>
                </li>
                <li>
                 <br>
                </li> 
                <li><a title="Checkout with Multiple Addresses" href="#">查询订单...</a> </li>
                <li>
                 <br>
                </li>
              </ul>
            </div>     
          </div>
        </div>
        <!--end cart COLLATERALS-->

      </div>
    </div>
  </div>
</section>

</div>
</template>




<script>
    var data;
    export default {
      name: 'shopping-cart',
      data () {
        return {
          items: [],
          pitch:[]
        }
      },
      created() {
          // GET /someUrl
          this.$axios.get('http://127.0.0.1:9100/get_my_shoppingCart').then((response) => {
          this.items = response.data['data'];
          console.log(this.items)
          console.log(typeof this.items)
          }, response => {
          // error callback

        });
      },

      /*method beginning*/
      methods: {

        /*rmShoppingCart begin*/
        rmShoppingCart: function(index,id,name) {
          let formData = new FormData();
          formData.append('cartID',id);
          formData.append('userName',name);
          let config = {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
          }
          this.$http.post('http://127.0.0.1:9100/del_shoppingCart/', formData, config).then(function (res) {
              console.log(res.data)
              if (res.data['code'] == 0){
                this.items.splice(index,1)
                alert('succeed')
              }             
            },
            function(res){
              alert('failed')
            })
            
        },
        /*rmShoppingCart end*/

        /*clearShoppingCart begin*/
        clearShoppingCart: function(name) {
          let formData = new FormData();
          formData.append('userName','111');
          let config = {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
          }
          this.$http.post('http://127.0.0.1:9100/clear_shoppingCart/', formData, config).then(function (res) {
              console.log(res.data)
              alert('succeed')
            },
            function(res){
              alert('failed')
            })
        },
        /*clearShoppingCart end*/

        /*pitchOn begin*/
        pitchOn: function(id,name) {
          if(document.getElementById(id).checked==true){
            this.pitch.push([{'cartID':id,'userName':name}])
          }
          if(document.getElementById(id).checked==false){
            for(var i=0; i<this.pitch.length; i++) {
              if(this.pitch[i][0]['cartID'] == id) {
                this.pitch.splice(i, 1);
                break;
              }
            }
          }
        }
        /*pitchOn end*/

      }
      /*method ending*/

    }

</script>

<script src='../assets/js/bootstrap.min.js' ></script>

<style scoped>

@import '../assets/css/style.css';
@import '../assets/css/font-awesome.css';
@import '../assets/css/bootstrap.min.css';

</style>
